{% extends "layout.html" %}
{% block content %}
<div class="home">
  <h2>Please paste your smart contract here!</h2>
  <div>
  <script type=text/javascript src="{{url_for('static', filename='js/tab.js')}}"></script>
  <script type=text/javascript src="{{url_for('static', filename='js/codemirror.js')}}"></script>
  <script type=text/javascript src="{{url_for('static', filename='js/javascript.js')}}"></script>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/codemirror.css') }}">
      <form action="" method="post" role="form">
          {{ form.csrf }}
          <div class="form-group">
              <textarea class="form-control" rows="15" id="code" name="code" placeholder="Please paste your smart contract here!"></textarea>
          </div>
          <div class="text-center"> <button type="submit" class="btn btn-success">Submit</button> </div>
       </form>
       <br />
      
       <!-- The results are going to be displayed here-->
       <div class="tab">
       <script type=text/javascript src="{{url_for('static', filename='js/tab.js')}}"></script>
           <button class="tablinks" onclick="openTab(event, 'clone')" id="goesFirst">CLONE DETECTION RESULTS</button>
           <button class="tablinks" onclick="openTab(event, 'bug')">BUG DETECTION RESULTS</button>
       </div>
      <div class="tabcontent" id ="clone">
           <div class="alert alert-info"> 
<!--                <strong> <div class="subtopic"> CLONE DETECTION RESULTS </div> </strong> -->
<!--                <br/> -->
              <table style="width:100%">
                  <tr>
                  <th class="lim" style="text-align:center">Your Contract </th>
                  <th class="lim" style="text-align:center">Clone Contract</th>
                  <th style="text-align:center">Contract URL </th>
                  <th style="text-align:center">Similarity Score  </th>
                  <th style="text-align:center">Rate our result!</th> 
                  </tr>
                  {% for i in top_result %}
                      <tr>
                      <td class="lim"> <div class="alert alert-success"> <span style="white-space: pre-line">{{ code[0:500] }}</span></div>  </td>
                      <td class="lim"> <div class="alert alert-success"> <span style="white-space: pre-line">{{ code[0:500] }}</span> </div> </td>
                      <td><a href={{ i[0] }} target="_blank"> Top {{loop.index}} similarity </a> </td>
                      <td>{{ i[1] }} </td>
                      <td>
                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                      <script type=text/javascript src="{{url_for('static', filename='js/star_clone.js') }}"></script>
                      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
                    <div class="star-rating">
                    <input type="radio" name="c_{{loop.index}}" id="c_{{loop.index}}_1" value="5" onclick="c({{loop.index}},5)"><label for="c_{{loop.index}}_1"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="c_{{loop.index}}" id="c_{{loop.index}}_2" value="4" onclick="c({{loop.index}},4)"><label for="c_{{loop.index}}_2"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="c_{{loop.index}}" id="c_{{loop.index}}_3" value="3" onclick="c({{loop.index}},3)"><label for="c_{{loop.index}}_3"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="c_{{loop.index}}" id="c_{{loop.index}}_4" value="2" onclick="c({{loop.index}},2)"><label for="c_{{loop.index}}_4"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="c_{{loop.index}}" id="c_{{loop.index}}_5" value="1" onclick="c({{loop.index}},1)"><label for="c_{{loop.index}}_5"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    </div>
                      </td>
                      </tr>
                  {% endfor %}
              </table>
              <input type="text" class="form-control" id="disp_c" name="disp_c">
           </div>
      </div>
      <div class="tabcontent" id ="bug">
           <div class="alert alert-danger"> 
<!--                <strong> <div class="subtopic"> BUG DETECTION RESULTS </div> </strong>  -->
<!--                <br/> -->
              <table style="width:100%">
                  <tr>
                  <th class="lim" style="text-align:center">Identified Bug <br/>  </th>
                  <th style="text-align:center">Bug Type <br/>  </th>
                  <th style="text-align:center">Rate our result! <br/> </th>  
                  </tr>
                  {% for i in top_result %}
                      <tr>
<!--                       <td>From Line {{1*loop.index}} to Line {{2*loop.index}} </td> -->
                      <td class="lim"> <div class="alert alert-success"> <span style="white-space: pre-line">{{ code[320:500] }}</span></div> </td>
                      <td> Access </td>
                      <td>
                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                      <script type=text/javascript src="{{url_for('static', filename='js/star.js') }}"></script>
                      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
                    <div class="star-rating">
                    <input type="radio" name="rating_{{loop.index}}" id="g_{{loop.index}}_1" value="5" onclick="g({{loop.index}},5)"><label for="g_{{loop.index}}_1"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="rating_{{loop.index}}" id="g_{{loop.index}}_2" value="4" onclick="g({{loop.index}},4)"><label for="g_{{loop.index}}_2"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="rating_{{loop.index}}" id="g_{{loop.index}}_3" value="3" onclick="g({{loop.index}},3)"><label for="g_{{loop.index}}_3"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="rating_{{loop.index}}" id="g_{{loop.index}}_4" value="2" onclick="g({{loop.index}},2)"><label for="g_{{loop.index}}_4"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    <input type="radio" name="rating_{{loop.index}}" id="g_{{loop.index}}_5" value="1" onclick="g({{loop.index}},1)"><label for="g_{{loop.index}}_5"><i class="active fa fa-star" aria-hidden="true"></i></label>
                    </div>
                      </td>
                      </tr>
                  {% endfor %}
              </table>
              <input type="text" class="form-control" id="disp" name="disp">
           </div>  
      </div>
       <br/>
  </div>
</div>
{% endblock %}